import React, {Component} from "react";
import ReactEcharts from "echarts-for-react";
import echarts from "echarts/lib/echarts";
import picture from '../timg.jpg';
import axios from "axios";
import {server_addr} from "../index";

export default class Overview extends Component {
    constructor(props) {
        super(props);
        this.state = {
            option_1: {},
            option_2: {},
            option_3: {},
            option_4: {},
            option_5: {},
            option_6: {},
            option_7: {},
            option_8: {},
            option_9: {},
            base: {},
            rank: [],
            K_d: [],
            default: "83%"
        }
        this.getData = this.getData.bind(this);
        this.Format = this.Format.bind(this);
    }

    getData(){
        var stock = window.location.href.split('?')[1].split('=')[1];
        //基本信息
        axios.get(server_addr+"/technique/base?stock="+stock,{}).then((res)=>{
            this.setState({
                base: res.data
            })
        }).catch(function (error) {
            alert('当前股票信息不全，返回查询其他股票！');
            window.location.href="#/";
        })
        //排行
        axios.get(server_addr+"/capital/rank?stock="+stock,{}).then((res)=>{
            var data = [];
            for(var i=0; i<4;i++){
                data.push(res.data.split(',')[i]);
            }
            this.setState({
                rank: data
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //日K
        axios.get(server_addr+"/technique/day?stock="+stock,{}).then((res)=>{
            let dates = []
            let data = []
            for(var key in res.data){
                let Data = []
                dates.push(key);
                Data.push(res.data[key].split(',')[0]);
                Data.push(res.data[key].split(',')[1]);
                Data.push(res.data[key].split(',')[2]);
                Data.push(res.data[key].split(',')[3]);
                data.push((Data));
            }
            this.setState({
                K_d: data.reverse()
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //MA
        axios.get(server_addr+"/technique/ma?stock="+stock,{}).then((res)=>{
            let dates = []
            let data_1 = []
            let data_2 = []
            let data_3 = []
            for(var key in res.data){
                dates.push(key);
                data_1.push(res.data[key].split(',')[0]);
                data_2.push(res.data[key].split(',')[1]);
                data_3.push(res.data[key].split(',')[2]);
            }
            this.setState({
                option_1: {
                    legend: [{
                        top: 14,
                        data: ['日k线', 'MA5', 'MA10', 'MA20'],
                        itemHeight: 5,
                        itemWidth: 10,
                        textStyle: {
                            fontSize: 14
                        }
                    }],
                    tooltip: {
                        transitionDuration:0,
                        confine: true,
                        borderWidth: 1,
                        borderColor: '#333',
                        backgroundColor: 'rgba(255,255,255,0.9)',
                        textStyle: {
                            fontSize: 5,
                            color: '#333'
                        },
                    },
                    dataZoom: [{
                        type: 'slider',
                        realtime: false,
                        start: 50,
                        end: 100,
                        top: 190,
                        height: 10,
                        handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '120%'
                    }, {
                        type: 'inside',
                        start: 40,
                        end: 70,
                        top: 30,
                        height: 20
                    }],
                    xAxis: [{
                        type: 'category',
                        data: dates.reverse(),
                        boundaryGap: false,
                        axisLine: {lineStyle: {color: '#777'}},
                        axisLabel: {
                            formatter: function (value) {
                                return echarts.format.formatTime('MM-dd', value);
                            },
                            fontSize: 8,
                            rotate: 35,
                        },
                        min: 'dataMin',
                        max: 'dataMax',
                        axisPointer: {
                            show: true
                        }
                    }],
                    yAxis: [{
                        scale: true,
                        splitNumber: 6,
                        axisLine: {lineStyle: {color: '#777'}},
                        splitLine: {show: true},
                        axisTick: {show: false},
                        axisLabel: {
                            fontSize: 8
                        }
                    }],
                    grid: [{
                        top: 40
                    }],
                    series: [{
                        name: '日k线',
                        type: 'candlestick',
                        data: this.state.K_d,
                        itemStyle: {
                            color: '#ef232a',
                            color0: '#14b143',
                            borderColor: '#ef232a',
                            borderColor0: '#14b143'
                        },
                        emphasis: {
                            itemStyle: {
                                color: 'black',
                                color0: '#444',
                                borderColor: 'black',
                                borderColor0: '#444'
                            }
                        }
                    },{
                        name: 'MA5',
                        type: 'line',
                        data: data_1.reverse(),
                        showSymbol: false,
                        lineStyle: {
                            width: 1.5
                        }
                    },{
                        name: 'MA10',
                        type: 'line',
                        data: data_2.reverse(),
                        showSymbol: false,
                        lineStyle: {
                            width: 1.5
                        }
                    },{
                        name: 'MA20',
                        type: 'line',
                        data: data_3.reverse(),
                        showSymbol: false,
                        lineStyle: {
                            width: 1.5
                        }
                    }]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //每股收益
        axios.get(server_addr+"/profit/perShareProfit?stock="+stock,{}).then((res)=>{
            let dates = [];
            let data_1 = [];
            let data_2 = [];
            let data_3= [];
            for(var key in res.data){
                dates.push(key);
                data_1.push(res.data[key].split(',')[0]);
                data_2.push(res.data[key].split(',')[1]);
                data_3.push(res.data[key].split(',')[2]);
            }
            this.setState({
                option_2: {
                    tooltip: {
                        trigger: 'axis',
                        transitionDuration:0,
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            var htmlStr = '';
                            htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
                            for(var i=0;i<params.length;i++){
                                //前面的原点和他的颜色
                                htmlStr += '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span><span style="color:#fff;">&nbsp;' + params[i].seriesName + '&nbsp;:&nbsp;</span>'+
                                    '<span style="color:#fff;">' + params[i].value + '&nbsp;元</span><br/>';
                            }
                            htmlStr += '</div>';
                            return  htmlStr
                        }},
                    legend: {
                        top: 10,
                        data: ['每股净资产', '每股收益', '行业平均每股收益'],
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    grid: {
                        right: 50,
                        top: 50,
                        bottom: 40
                    },
                    xAxis: [{
                        type: 'category',
                        data: this.Format(dates),
                        boundaryGap: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        axisLabel: {
                            fontSize: 8
                        },
                        min: 'dataMin',
                        max: 'dataMax',
                        axisPointer: {
                            show: true
                        }
                    }],
                    yAxis: [{
                        scale: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        axisTick: {show: false},
                        axisLabel: {
                            fontSize: 8
                        }
                    },{
                        scale: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        axisTick: {show: false},
                        axisLabel: {
                            fontSize: 8
                        }
                    }],
                    series: [
                        {
                            name: '每股收益',
                            type: 'bar',
                            data: data_1,
                            itemStyle:{
                                normal:{
                                    barBorderRadius: 2
                                }
                            }
                        },{
                            name: '行业平均每股收益',
                            type: 'bar',
                            data: data_2,
                            itemStyle:{
                                normal:{
                                    color:'green',
                                    barBorderRadius: 2
                                }
                            }
                        },{
                            name: '每股净资产',
                            type: 'line',
                            smooth: true,
                            yAxisIndex: 1,
                            data: data_3
                        }
                    ]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //雷达图
        axios.get(server_addr+"/radar?stock="+stock,{}).then((res)=>{
            var data = [res.data[0], res.data[4], res.data[8], res.data[12], res.data[16], res.data[17]]
            var data_1 = [res.data[1], res.data[5], res.data[9], res.data[13], 100, res.data[18]]
            var data_2 = []
            for(var i=0; i<data_1.length; i++){
                if(data_1[i]<0){
                    data_2.push(2*data_1[i])
                }else{
                    data_2.push(0.5*data_1[i])
                }
            }
            this.setState({
                option_3: {
                    tooltip: {},
                    radar: [
                        {
                            indicator: [
                                { text: '盈利能力'},
                                { text: '成长能力'},
                                { text: '运营能力'},
                                { text: '偿债能力'},
                                { text: '风险规避'},
                                { text: '资金统计'}
                            ],
                            center: ['50%', '50%'],
                            radius: 120,
                            splitNumber: 4,
                            shape: 'circle',
                            name: {
                                formatter: '【{value}】',
                                textStyle: {
                                    color: '#72ACD1'
                                }
                            },
                            splitArea: {
                                areaStyle: {
                                    color: ['rgba(114, 172, 209, 0.2)',
                                        'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
                                        'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
                                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                                    shadowBlur: 10
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: 'rgba(255, 255, 255, 0.5)'
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    color: 'rgba(255, 255, 255, 0.5)'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '雷达图',
                            type: 'radar',
                            emphasis: {
                                lineStyle: {
                                    width: 4
                                }
                            },
                            data: [
                                {
                                    value: data_1,
                                    name: '行业平均状况',
                                    symbol: 'rect',
                                    symbolSize: 5,
                                    lineStyle: {
                                        width: 3,
                                        type: 'dashed'
                                    }
                                },
                                {
                                    value: data,
                                    name: '该股状况',
                                    lineStyle: {
                                        width: 3
                                    },
                                    areaStyle: {
                                        color: 'rgba(255, 255, 255, 0.5)'
                                    }
                                },
                                {
                                    value: data_2,
                                    name: '行业平均状况的1/2值',
                                    symbol: 'rect',
                                    symbolSize: 5,
                                    lineStyle: {
                                        width: 3,
                                        color: 'green',
                                        type: 'dashed'
                                    }
                                }
                            ]
                        }
                    ]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //资金流向
        axios.get(server_addr+"/capital/flow?stock="+stock,{}).then((res)=>{
            let dates = [];
            let data_1 = [];
            let data_2 = [];
            let data_3 = [];
            let data_4 = [];
            let data_5 = [];
            for(var key in res.data){
                dates.push(key);
                data_1.push(res.data[key].split(',')[0]);
                data_2.push(res.data[key].split(',')[1]);
                data_3.push(res.data[key].split(',')[2]);
                data_4.push(res.data[key].split(',')[3]);
                data_5.push(res.data[key].split(',')[4]);
            }
            this.setState({
                option_4:{
                    legend: [{
                        top: 2,
                        data: ['涨跌幅','N日超大单资金净流入','N日大单资金净流入'],
                        itemHeight: 5,
                        itemWidth: 10,
                        textStyle: {
                            fontSize: 10
                        }
                    },{
                        top: 16,
                        data: ['N日中单资金净流入','N日小单资金净流入'],
                        itemHeight: 5,
                        itemWidth: 10,
                        textStyle: {
                            fontSize: 10
                        }
                    }],
                    tooltip: {
                        trigger: 'axis',
                        transitionDuration:0,
                        axisPointer: {
                            type: 'line'
                        }
                    },
                    grid: {
                        top: 40
                    },
                    dataZoom: [{
                        type: 'slider',
                        realtime: false,
                        start: 50,
                        end: 100,
                        top: 190,
                        height: 10,
                        handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '120%'
                    }, {
                        type: 'inside',
                        start: 40,
                        end: 70,
                        top: 30,
                        height: 20
                    }],
                    xAxis: [{
                        type: 'category',
                        data: dates.reverse(),
                        boundaryGap: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        axisLabel: {
                            formatter: function (value) {
                                return echarts.format.formatTime('MM-dd', value);
                            },
                            fontSize: 8,
                            rotate: 35,
                        },
                        min: 'dataMin',
                        max: 'dataMax',
                        axisPointer: {
                            show: true
                        }
                    }],
                    yAxis: [{
                        scale: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        splitLine: {show: true},
                        axisTick: {show: false},
                        axisLabel: {
                            fontSize: 8
                        }
                    },{
                        scale: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        axisTick: {show: false},
                        axisLabel: {
                            fontSize: 8
                        }
                    }],
                    series: [
                        {
                            name: '涨跌幅',
                            type: 'line',
                            smooth: 0.5,
                            yAxisIndex: 1,
                            itemStyle:{
                                normal:{
                                    lineStyle: {
                                        width: 2.5
                                    },
                                    color:'#ef232a',
                                }
                            },
                            data: data_5.reverse()
                        },
                        {
                            name: 'N日超大单资金净流入',
                            type: 'line',
                            symbol: 'none',
                            smooth: 0.5,
                            itemStyle:{
                                normal:{
                                    lineStyle: {
                                        width: 2.5
                                    },
                                    color: '#14b143'
                                }
                            },
                            data: data_4.reverse()
                        },
                        {
                            name: 'N日大单资金净流入',
                            type: 'line',
                            symbol: 'none',
                            smooth: 0.5,
                            itemStyle:{
                                normal:{
                                    lineStyle: {
                                        width: 2.5
                                    },
                                    color: '#ba55d3'
                                }
                            },
                            data: data_3.reverse()
                        },
                        {
                            name: 'N日中单资金净流入',
                            type: 'line',
                            symbol: 'none',
                            smooth: 0.5,
                            itemStyle:{
                                normal:{
                                    lineStyle: {
                                        width: 2.5
                                    },
                                    color: '#60C0DD'
                                }
                            },
                            data: data_2.reverse()
                        },
                        {
                            name: 'N日小单资金净流入',
                            type: 'line',
                            symbol: 'none',
                            smooth: 0.5,
                            itemStyle:{
                                normal:{
                                    lineStyle: {
                                        width: 2.5
                                    },
                                    color: '#E87C25'
                                }
                            },
                            data: data_1.reverse()
                        }
                    ]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //净利润增长率
        axios.get(server_addr+"/grow/netProfitGrowRatio?stock="+stock,{}).then((res)=>{
            let dates = [];
            let data_1 = [];
            let data_2 = [];
            for(var key in res.data){
                dates.push(key);
                data_1.push(res.data[key].split(',')[0]);
                data_2.push(res.data[key].split(',')[1]);
            }
            this.setState({
                option_5:{
                    tooltip: {trigger: 'axis', transitionDuration:0,
                        formatter: function (params) {
                            var htmlStr = '';
                            htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
                            for(var i=0;i<params.length;i++){
                                //前面的原点和他的颜色
                                htmlStr += '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span><span style="color:#fff;">&nbsp;' + params[i].seriesName + '&nbsp;:&nbsp;</span>'+
                                    '<span style="color:#fff;">' + params[i].value + '&nbsp;%</span><br/>';
                            }
                            htmlStr += '</div>';
                            return  htmlStr
                        }},
                    legend: {
                        top: 5,
                        data: ['净利润增长率', '净资产增长率'],
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    grid: {
                        top: 40,
                        bottom: 30
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.Format(dates),
                        axisLine: {lineStyle: {color: '#777'}},
                        axisLabel: {
                            fontSize: 8
                        },
                        min: 'dataMin',
                        max: 'dataMax',
                        axisPointer: {
                            show: true
                        }
                    },
                    yAxis: {
                        scale: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        splitLine: {show: true},
                        axisTick: {show: false},
                        axisLabel: {
                            fontSize: 8
                        }
                    },
                    series: [
                        {
                            name: '净利润增长率',
                            type: 'line',
                            smooth: true,
                            stack: '总量',
                            data: data_1
                        },
                        {
                            name: '净资产增长率',
                            type: 'line',
                            smooth: true,
                            stack: '总量',
                            itemStyle:{
                                normal:{
                                    color:'green',
                                }
                            },
                            data: data_2
                        }
                    ]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //Z值
        axios.get(server_addr+"/risk/z_test?stock="+stock,{}).then((res)=>{
            this.setState({
                option_6: {
                    series: [{
                        name: 'Z值分析',
                        type: 'gauge',
                        radius: "100%",
                        min: -100,
                        max: 100,
                        axisLine : {
                            show: true,
                            lineStyle: {
                                width: 20
                            }
                        },
                        axisLabel : {
                            distance : 0,
                            fontSize: 6
                        },
                        detail: {
                            formatter: '{value}',
                            fontSize: 20
                        },
                        data: [{value: res.data}]
                    }]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //市盈率
        axios.get(server_addr+"/risk/pb?stock="+stock,{}).then((res)=>{
            this.setState({
                option_7: {
                    series: [{
                        name: '市盈率',
                        type: 'gauge',
                        radius: "100%",
                        min: -100,
                        max: 100,
                        axisLine : {
                            show: true,
                            lineStyle: {
                                width: 20
                            }
                        },
                        axisLabel : {
                            distance : 0,
                            fontSize: 6
                        },
                        detail: {
                            formatter: '{value}%',
                            fontSize: 20
                        },
                        data: [{value: res.data}]
                    }]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //市净率
        axios.get(server_addr+"/risk/pe?stock="+stock,{}).then((res)=>{
            this.setState({
                option_8: {
                    series: [{
                        name: '市净率',
                        type: 'gauge',
                        radius: "100%",
                        min: -100,
                        max: 100,
                        axisLine : {
                            show: true,
                            lineStyle: {
                                width: 20
                            }
                        },
                        axisLabel : {
                            distance : 0,
                            fontSize: 6
                        },
                        detail: {
                            formatter: '{value}%',
                            fontSize: 20
                        },
                        data: [{value: res.data}]
                    }]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //主营业务收入
        axios.get(server_addr+"/profit/mainBusinessIncome?stock="+stock,{}).then((res)=>{
            let dates = [];
            let data_1 = [];
            let data_2 = [];
            for(var key in res.data){
                dates.push(key);
                data_1.push(res.data[key].split(',')[0]);
                data_2.push(res.data[key].split(',')[1]);
            }
            this.setState({
                option_9: {
                    legend: {
                        top: 1,
                        data: ['主营业务收入', '行业平均主营业务收入'],
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        transitionDuration:0,
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            var htmlStr = '';
                            htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
                            for(var i=0;i<params.length;i++){
                                //前面的原点和他的颜色
                                htmlStr += '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span><span style="color:#fff;">&nbsp;' + params[i].seriesName + '&nbsp;:&nbsp;</span>'+
                                    '<span style="color:#fff;">' + params[i].value + '&nbsp;元</span><br/>';
                            }
                            htmlStr += '</div>';
                            return  htmlStr
                        }},
                    grid: {
                        top: 40,
                        bottom: 30,
                        left: 60,
                        right: 20
                    },
                    xAxis: [{
                        type: 'category',
                        data: this.Format(dates),
                        boundaryGap: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        axisLabel: {
                            fontSize: 8
                        },
                        min: 'dataMin',
                        max: 'dataMax',
                        axisPointer: {
                            show: true
                        }
                    }],
                    yAxis: [{
                        scale: true,
                        axisLine: {lineStyle: {color: '#777'}},
                        axisTick: {show: false},
                        axisLabel: {
                            fontSize: 8
                        },
                        splitLine:{
                            show:false
                        }
                    }],
                    series: [
                        {
                            name: '主营业务收入',
                            type: 'bar',
                            data: data_1,
                            showBackground: true,
                            itemStyle:{
                                normal:{
                                    barBorderRadius: 2.5
                                }
                            }
                        },
                        {
                            name: '行业平均主营业务收入',
                            type: 'line',
                            symbol: "none",
                            itemStyle:{
                                normal:{
                                    color:'green'
                                }
                            },
                            data: data_2,
                            showBackground: true,
                            markLine: {
                                data: [
                                    {type: 'average', lineStyle:{type:"solid", width: 2.5}}
                                ]
                            }
                        }
                    ]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
    }

    Format(dates){
        let new_dates = []
        for(var i=0; i<dates.length; i++){
            switch (dates[i].split('-')[1]) {
                case '03':
                    new_dates.push(dates[i].split('-')[0].substring(2,)+'年季1');
                    break;
                case '06':
                    new_dates.push(dates[i].split('-')[0].substring(2,)+'年季2');
                    break;
                case '09':
                    new_dates.push(dates[i].split('-')[0].substring(2,)+'年季3');
                    break;
                case '12':
                    new_dates.push(dates[i].split('-')[0].substring(2,)+'年季4');
                    break;
                default:
                    new_dates.push(dates[i]);
            }
        }
        return new_dates;
    }

    componentDidMount() {
        this.getData()
        this.interval = setInterval(()=>{
            if(this.state.K_d.length === 0){
                this.getData();
            }
            if(this.props.location.state){
                this.setState({
                    default: "94%"
                })
            }else{
                this.setState({
                    default: "83%"
                })
            }
        },100)
    }

    componentWillUnmount() {
        clearInterval(this.interval)
    }

    render() {
        document.title = "总体概括";
    //     backgroundImage:`url(${picture})`, backgroundSize:"95% 95%", backgroundAttachment:"fixed"
        return (
            <div style={{width:this.state.default, height:"100vh", float:"right"}}>
                <div style={{width:"100%", height:"8vh", background:"gray"}}>
                    <p style={{color:"white", fontWeight:"bold", fontSize:"2vw", textAlign:"center"}}>{this.state.base.name}</p>
                </div>
                <div style={{width:"32%", height:"60vh", float:"left"}}>
                    <ReactEcharts option={this.state.option_1} notMerge={true}
                                  style={{width:"100%", height:"30vh"}}/>
                    <ReactEcharts option={this.state.option_2} notMerge={true}
                                  style={{width:"100%", height:"30vh"}}/>
                </div>
                <div style={{width:"36%", height:"60vh", float:"left"}}>
                    <div style={{width:"100%", height:"15vh", textAlign:"center"}}>
                        <div style={{width:"45%", marginLeft:"1%", float:"left"}}>
                            <p style={{height:"3vh", color:"darkorange", fontWeight:"bold", fontSize:"2.2vw"}}>
                                {this.state.rank[0]} / {this.state.rank[1]}</p>
                            <p style={{fontWeight:"bold", fontSize:"1.2vw"}}>行业排名</p>
                        </div>
                        <div style={{width:"45%", marginLeft:"1%", float:"left"}}>
                            <p style={{height:"3vh", color:"darkorange", fontWeight:"bold", fontSize:"2.2vw"}}>
                                {this.state.rank[2]} / {this.state.rank[3]}</p>
                            <p style={{fontWeight:"bold", fontSize:"1.2vw"}}>市场排名</p>
                        </div>
                    </div>
                    <ReactEcharts option={this.state.option_3} notMerge={true}
                                  style={{width:"100%", height:"45vh"}}/>
                </div>
                <div style={{width:"32%", height:"60vh", float:"left"}}>
                    <ReactEcharts option={this.state.option_4} notMerge={true}
                                  style={{width:"100%", height:"30vh"}}/>
                    <ReactEcharts option={this.state.option_5} notMerge={true}
                                  style={{width:"100%", height:"30vh"}}/>
                </div>
                <div style={{width:"22.5%", height:"30vh", float:"left"}}>
                    <p style={{fontWeight:"bold", fontSize:"1.2vw", textAlign:"center"}}>Z值分析</p>
                    <ReactEcharts option={this.state.option_6} notMerge={true}
                                  style={{width:"100%", height:"24vh"}}/>
                </div>
                <div style={{width:"22.5%", height:"30vh", float:"left"}}>
                    <p style={{fontWeight:"bold", fontSize:"1.2vw", textAlign:"center"}}>市盈率</p>
                    <ReactEcharts option={this.state.option_7} notMerge={true}
                                  style={{width:"100%", height:"24vh"}}/>
                </div>
                <div style={{width:"22.5%", height:"30vh", float:"left"}}>
                    <p style={{fontWeight:"bold", fontSize:"1.2vw", textAlign:"center"}}>市净率</p>
                    <ReactEcharts option={this.state.option_8} notMerge={true}
                                  style={{width:"100%", height:"24vh"}}/>
                </div>
                <div style={{width:"32%", height:"30vh", float:"left"}}>
                    <ReactEcharts option={this.state.option_9} notMerge={true}
                                  style={{width:"100%", height:"30vh"}}/>
                </div>
            </div>
        );
    }
}